<!-- 分享详情 -->
<template>
	<view class="box">
		<view class="index-box">
			<view class="content u-m-b-20 flex-cct">
				<view class="c-state flex-ct">
					<view :class="['iconfont', allNum > len ? 'iconfont-e607' : 'iconfont-e730', 'cs-icon']"></view>
					<view class="cs-text f-40 c-e93 fw-bold">{{ allNum > len ? '拼团中...' : '拼团成功' }}</view>
				</view>
				<view class="f-26 mb-30" v-if="allNum - len > 0 ? true : false">还差{{ allNum - len }}人，赶快邀请好友来拼团吧</view>
				<view class="data-list">
					<view class="data-item" v-for="item in dataList" :key="item.pk_id"><image :src="item.headimgurl"></image></view>
					<view class="data-item di-none" v-for="(item, index) in allNum - len" :key="index">?</view>
				</view>
				<button class="sub-btn bgc-red" v-if="partType == 1"  @click="partOrder">立即参与拼团</button>
				<button :class="['sub-btn1',partType == 1?'bgc-cc':'bgc-red']" open-type="share">邀请好友参团</button>
				<!-- <text class="f-22 c-99 mt-24">分享好友越多，成团越快</text> -->
			</view>
			<u-cell-group v-if="partType">
				<u-cell-item title="查看商品" @click="partOrder"></u-cell-item>
			</u-cell-group>
		</view>
		<sww-login />
	</view>
</template>

<script>
import { countTime } from '@/utils/moment/index.js';
export default {
	data() {
		return {
			dataList: [],
			allNum: 0, // 总拼团人数
			len: 0,
			guid: '', //拼团标识ID
			proId: '', // 拼团商品ID
			partType: 0 // 1:可以拼团 2不能拼团
		};
	},
	onLoad(options) {
		let { guid, id } = options;
		this.guid = guid;
		this.proId = id;
		if ((guid, id)) {
			this.initPage(guid);
		}
	},
	onShow () {
		if(this.allNum > 0){
			this.initPage(this.guid)
		}
	},
	onPullDownRefresh() {
		this.initPage(this.guid);
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 700);
	},
	methods: {
		initPage(Guid) {
			this.$loading();
			this.$resPost('GetTeamBuyUsersByGuid', { Guid })
				.then(res => {
					this.dataList = res.data;
					this.len = this.dataList.length;
					this.allNum = res.data[0].number;
					this.judgePart();
					this.$hide();
				})
				.catch(() => {
					this.$hide();
				});
		},
		// 判断能否参团
		judgePart() {
			if (this.$isLogin()) {
				let bol = this.dataList.some(item => {
					return item.fk_users_id === this.vuex_user.pk_id;
				});
				if (bol) {
					this.partType = 2;
				} else {
					this.partType = this.allNum <= this.len ? 2 : 1;
				}
			} else {
				this.partType = 1;
			}
		},
		// 跳转商品详情
		partOrder() {
			this.$login('judgePart').then(() => {
				let { guid, proId } = this;
				if (!proId) {
					this.$toast('商品ID异常');
					return;
				}
				let str = `/package/product/group/details/index?=${this.guid}&id=${this.proId}`;
				// let index = this.dataList.findIndex((item)=>{
				// 	return item.users_id == this.vuex_user.pk_id
				// })
				if (this.partType == 1) {
					if (!guid) {
						this.$toast('团购标识ID异常');
						return;
					}
					str += `&guid=${this.guid}`;
				}
				this.$linkTo(str);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.content {
	width: 100%;
	padding: 80rpx 45rpx 50rpx;
	margin-bottom: 10rpx;
	background-color: #ffffff;
}

.c-state {
	margin-bottom: 40rpx;
}

.cs-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
	color: #e93324;
	font-size: 50rpx;
}

.data-list {
	width: 520rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.data-item {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
	margin-right: 50rpx;
}

.data-item:nth-of-type(4n) {
	margin-right: 0;
}

.data-item:last-of-type {
	margin-right: 0;
}

.data-item > image {
	border-radius: 50%;
}

.di-none {
	background: rgba(255, 140, 49, 0.1);
	border: 1rpx solid rgba(255, 140, 49, 1);
	text-align: center;
	line-height: 78rpx;
	font-size: 48rpx;
	color: #ff8c31;
}

.sub-btn {
	width: 100%;
	height: 100rpx;
	border-radius: 16rpx;
	margin-top: 65rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #ffffff;
	font-weight: 500;
}
.sub-btn1{
	width: 100%;
	height: 100rpx;
	border-radius: 16rpx;
	margin-top: 65rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #ffffff;
	font-weight: 500;
}

.flex-cct {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-ct {
	display: flex;
	align-items: center;
	justify-content: center;
}

.group-box-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rpx;
	height: 100rpx;
	background-color: #ffffff;
	padding: 0 20rpx;
}

.f-40 {
	font-size: 40rpx;
}

.c-e93 {
	color: #e93324;
}

.fw-bold {
	font-weight: bold;
}

.mb-30 {
	margin-bottom: 30rpx;
}

.f-26 {
	font-size: 26rpx;
}

.f-22 {
	font-size: 22rpx;
}

.bgc-red {
	background: rgba(233, 51, 36, 1);
}

.bgc-cc {
	background-color: #ccc;
}
.c-99 {
	color: #999999;
}

.c-99 {
	color: #999999;
}

.f-40 {
	font-size: 40rpx;
}

.c-e93 {
	color: #e93324;
}

.mt-24 {
	margin-top: 24rpx;
}
</style>
